<template>
  <div class="verification1">
    <el-form
      :model="information"
      :rules="rules"
      label-position="top"
      label-width="80px"
      ref="form"
    >
      <el-form-item label="姓名" prop="username">
        <el-input
          v-model="information.username"
          type="text"
          name="username"
          required="required"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="ID">
        <el-input
          v-model="information.ID"
          type="text"
          name="ID"
          required="required"
        ></el-input>
      </el-form-item>
      <div class="submit">
        <!-- <input type="button" value="下一步" @click="$emit('next1')" /> -->
        <input type="button" value="下一步" @click="submitForm" />
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import { FindPassword1Params, UserService } from "@/utils/api/user";
import { ElMessage } from 'element-plus';

export default defineComponent({
  props: {
    phoneNumber: String
  },
  setup(props, context) {
    const information: Ref<FindPassword1Params> = ref({
      username: "",
      ID: "",
    });
    const form = ref(null);
    const submitForm = () => {
      let flag;
     (form.value as any).validate((valid: boolean) => {
        flag = valid;
      });
      if (flag === true) {
        UserService.findPassword1(information.value)
          .then((res) => {
            console.log(res.data);
            if (res.data.a == 21) {
              context.emit('next1');
              context.emit('update:phoneNumber',res.data.b);
            } else if (res.data.a ==  20) {
              openError('该用户不存在！');
            } else {
              openError('出错了，请联系管理员！')
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    };
    const checkUsername = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("姓名不能为空"));
      }
      let r =/^[\u4E00-\u9FFF]{2,6}$/;
      if (!r.test(value)) {
        return callback(new Error("姓名应该为2到6个汉字"));
      }
      callback();
    };
    const checkID = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      let r =/^\d{18}$/;
      if (!r.test(value)) {
        return callback(new Error("身份证号应该为18位数字"));
      }
      callback();
    };

    const rules = {
      username: [{ validator: checkUsername, trigger: "submit" }],
      ID: [{ validator: checkID, trigger: "submit" }],
    };
    const openError= (inf: string) => {
          ElMessage({
            showClose: true,
            message: inf,
            type: 'error',
            offset: 200,
          });
    };  
    return {
      form,
      submitForm,
      information,
      rules,
      openError,
    };
  },
});
</script>
<style lang="scss" scoped>
@import "@/assets/css/config.scss";

.el-form-item {
  text-align: left;
}
.el-input {
  width: 320px;
}
div.submit {
  text-align: left;
}
input[type="button"] {
  cursor: pointer;
  background: $themeRed;
  color: white;
  padding: 15px 0;
  letter-spacing: 8px;
  text-indent: 8px;
  width: 320px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 6px;
}
</style>

